<template>
  <div class="article">
    <div style="margin-top: 20px; width: 820px">
      <article-skeleton v-if="IsSkeleton"></article-skeleton>

      <article-content v-else :articleContent="articleContentData"></article-content>

      <!-- <div class="sidebar">
        <div class="sidebar-icon">
          <i class="vua-icon">
            <svg
              t="1648024379466"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2219"
              width="40"
              height="40"
            >
              <path
                d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z"
                p-id="2220"
              />
            </svg>
          </i>
        </div>

        <div class="sidebar-icon">
          <chat-dot-round style="width: 40px; height: 40px" @click="toComment" />
        </div>
      </div> -->

      <div class="article-comment" name="comment">
        <div class="commetn-form">
          <p class="title">评论</p>

          <div class="content">
            <div class="img">
              <el-avatar style="cursor: pointer" :size="50" :src="headpicSrc" />
            </div>
            <el-input
              v-model="textarea"
              maxlength="30"
              placeholder="输入评论"
              show-word-limit
              type="textarea"
            />
            <el-button @click="addDiscuss">发布</el-button>
          </div>
        </div>

        <div class="comment-list" v-if="discussData.length > 0">
          <div class="title">全部评论 {{ discussData.length }}</div>

          <div class="comment" v-for="discuss in discussData">
            <img class="img" :src="discuss.headpic" alt="用户头像" />
            <div class="comment-main">
              <div class="meta">{{ discuss.nickName }}</div>
              <div class="content">{{ discuss.content }}</div>
              <div class="action">点赞 {{ discuss.likeCount }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { ChatDotRound } from '@element-plus/icons-vue'

import ArticleContent, { ArticleContentPorps } from './components/ArticleContent.vue'
import ArticleSkeleton from './components/ArticleSkeleton .vue'

import { articleContent, articleDiscuss } from '/@/api/article/article'
import { articleAddDiscuss } from '/@/api/article/articleAdd'
import router, { useRoute } from '/@/router'

import { userHeadpic } from '/@/api/users/usersActive'
let headpicSrc = ref('')

onMounted(() => {
  userHeadpic().then((res) => {
    if (res.data) {
      headpicSrc.value = res.data
    }
  })
})

let IsSkeleton = ref(true)

let textarea = ref('')

// let articleContentData = ref({
//   articleId: 1, // 文章ID
//   pushDate: '2020/9/11', // 发布时间

//   userId: 1, // 用户ID
//   nickName: '轩小浅', // 发表用户昵称
//   headpic:
//     'https://p6-passport.byteacctimg.com/img/user-avatar/ddd95876f23c6e8ab56cab355f78a059~300x300.image', // 用户头像

//   title: '这是一篇测试文章', // 文章题目
//   likeCount: 299, // 文章点赞数
//   commentCount: 199, // 文章评论数
//   readCount: 999, // 文章浏览量
//   //   articleImg:'https://p6-passport.byteacctimg.com/img/user-avatar/ddd95876f23c6e8ab56cab355f78a059~300x300.image', // 文章封面

//   contentMd: '' //文章markdown内容
// })

const articleContentData = ref<ArticleContentPorps>()

const route = ref(useRoute())

articleContent({
  userId: localStorage.getItem('userId') ?? -1,
  articleId: route.value.params.articleId
}).then((res) => {
  articleContentData.value = res.data
  IsSkeleton.value = false
})

let discussData: any = ref([])

articleDiscuss({
  userId: localStorage.getItem('userId') ?? '-1',
  articleId: route.value.params.articleId
}).then((res) => {
  discussData.value = res.data
})

const addDiscuss = () => {
  articleAddDiscuss({
    userId: localStorage.getItem('userId') ?? -1,
    articleId: route.value.params.articleId,
    currentTime: Date.parse(String(new Date())),
    content: textarea.value
  }).then((res) => {
    if (res.data) {
      discussData.value.unshift({
        userId: localStorage.getItem('userId') ?? -1,
        articleId: route.value.params.articleId,
        currentTime: Date.parse(String(new Date())),
        content: textarea.value,
        headpic: headpicSrc.value
      })

      textarea.value = ''
    }
    console.log(res.data)
  })
}

const toComment = () => {}
</script>

<style lang="scss" scoped>
.sidebar {
  position: fixed;
  z-index: 2;
  top: 140px;
  right: 460px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 60px;
  height: 160px;

  .sidebar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    cursor: pointer;
    border-radius: 50%;
    background-color: white;
  }
}

.article {
  display: flex;
  justify-content: center;
  width: 100%;
  min-width: 820px;
  min-height: 100%;
  background-color: #f1f2f9;

  .article-comment {
    box-sizing: border-box;
    width: 100%;
    min-height: 200px;
    margin-top: 20px;
    margin-bottom: 100px;
    padding: 1.8rem;
    border-radius: 4px;
    background-color: white;

    .commetn-form {
      position: relative;
      display: flex;
      flex-direction: column;
      border-radius: 2px;

      .content {
        display: flex;

        .img {
          flex: 0 0 auto;
          width: 3.333rem;
          height: 3.333rem;
          margin-right: 1rem;
          border-radius: 50%;
          background-color: #f0f0f0;
        }
      }
    }

    .comment-list {
      padding: 40px 0 16px;

      .comment {
        display: flex;
        padding: 16px 0;

        .img {
          flex: 0 0 auto;
          width: 3.333rem;
          height: 3.333rem;
          margin-right: 1rem;
          border-radius: 50%;
          background-color: #f0f0f0;
        }

        .comment-main {
          .meta {
            font-size: .9rem;
            display: flex;
            align-items: center;
            color: #2e3135;
          }

          .content {
            font-size: 14px;
            font-weight: 400;
            line-height: 2rem;
            display: -webkit-box;
            overflow: hidden;
            -webkit-box-orient: vertical;
            margin-top: 8px;
            text-overflow: ellipsis;
            color: #515767;

            -webkit-line-clamp: 6;
          }

          .action {
            font-size: 14px;
            line-height: 22px;
            display: flex;
            align-items: center;
            margin-top: 8px;
            margin-right: 16px;
            cursor: pointer;
            color: #8a919f;
          }
        }
      }
    }
  }
}

.title {
  font-size: 18px;
  font-weight: 600;
  line-height: 30px;
  margin-bottom: 1rem;
  color: #252933;
}

</style>
